<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋转卡片</title>
	<style type="text/css">
		*{
			padding:0;
			margin: 0;
		}
		body{
			display:flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: linear-gradient(200deg,#78f,#f78);
		}
		.card{
			position:relative;
			width: 300px;
			height: 450px;
			border-radius: 30px;
/*			鼠标放到元素上变成小手*/
			cursor: pointer;
			background: #fff;
			box-shadow: 1px 1px 20px rgba(0,0,0,.1);
			transform-style: preserve-3d;
			animation:rotate-reverse 1.2s cubic-bezier(.66,-0.47,.33,1.5)  forwards;
		}
		.card:hover{
/*			动画第三个属性是贝塞尔曲线 自定义动画的运动轨迹 forward是完成状态当动画到100%时就会停下来不会到0% 一般是0% 默认backwards */
			animation:rotate 1.2s cubic-bezier(.66,-0.47,.33,1.5)  forwards;
		}
		.front,.back{
			display:flex;
/*			垂直*/
			flex-direction: column;
/*			子元素垂直陈列水平居中*/
			align-items: center;
/*			平均分配高度给每一个子元素*/
			justify-content: space-around;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 1.3em;
			border-radius: 30px;
			background: #fff;
		}
		.back{
			transform:rotateY(180deg);
		}
/*		定义翻转动画*/
		@keyframes rotate{
			0%{transform:rotateY(0)}
			100%{transform:rotateY(180deg)}
		}
		@keyframes rotate-reverse{
			0%{transform:rotateY(180deg)}
			100%{transform:rotateY(0)}
		}
	</style>
</head>

<body>
	<div class="card">
		<div class="front">
			<p>来瓶汽水吗？</p>
		</div>
		<div class="back">
			<p>百事！</p>
			<p>可乐！</p>
			<p>雪碧！</p>
			<p>七喜！</p>
		</div>
	</div>
</body>
</html>
